跳至主要内容

00 簡介

提示

這系列將結合 WordPress(後端)與 Next.js(前端)打造一個全端網頁。

這裡使用的 Next.js 為 pages router 模式

為什麼使用 "Wordpress"

  • 在我負責的公司網頁案件中,主要集中於為商家和企業打造形象網站
  • 這類網站的主要任務是敘述品牌的故事和塑造其數位形象
  • 客戶無需複雜功能或會員系統的網站
  • 客戶需要自由編輯網頁內容,需要有一個後台提供文案內容,並由前台透過 api 的方式串接文案內容

基於上述幾點,WordPress 提供了一個理想的解決方案。它擁有強大的社群支持,開發者可以自由上傳插件到它的外掛庫,也因為其後台操作界面的簡便性,使得即便是技術背景較弱的用戶也能輕鬆管理其網站,降低與客戶溝通的成本,同時也降低我們額外開發網頁後台的成本。

Wordpress Headless CMS

我們這裡所談的 wordpress 跟傳統所謂的套板網頁差距甚大,在 Headless 架構中,WordPress 僅作為內容管理系統,也就是數據的存儲和管理中心。這樣,前端展示層就可以完全自由地使用最新的 Web 技術來建造,例如 React(Next), Vue(Nuxt)。

核心外掛

建構一個自由度高的 Wordpress cms 需要以下外掛:

  • WP GraphQL:提供 WordPress 網站一個 GraphQL API 接口,用於高效地載入和管理數據。
  • ACF:增加和管理自訂字段的功能,支援多種數據類型,例如列表、物件、日期選擇器、檔案和圖片上傳、文字欄位等等。
  • WPGraphQL for Advanced Custom Fields:讓進階自定義字段 (ACF) 整合至 WPGraphQL 的 Schema 中
  • Classic Editor (傳統編輯器):為 WordPress 網站啟用之前的傳統編輯器(未安裝傳統編輯器)

    (安裝傳統編輯器)
備註

強烈建議安裝傳統編輯器,以便後續使用 ACF 來新增修改欄位

建議外掛

【功能型】

【WPGraphQL schema】

  • Add WPGraphQL SEO若安裝Yoast SEO 則需安裝 Add WPGraphQL SEO WPGraphQL 才能查詢到 Yoast SEO 的資料
    為 WPGraphQL 插件添加 Yoast SEO 的 schema。
  • WPGraphQL Meta Query:為 WPGraphQL 插件添加 Meta 查詢支持,需要 WPGraphQL 版本 0.0.23 或以上。
  • WPGraphQL Offset Pagination:為 WPGraphQL 插件添加換頁、頁數、分頁功能。
  • WPGraphQL Tax Query:為 WPGraphQL 插件添加 Tax_Query 支持,才能夠使用 WPGraphQL 來查詢符合特定標籤或分類的欄位資料,要求 WPGraphQL 版本 0.4.0 或更新。